<template>
  <div class="app-container">
    <RechargeLimitSettingFastAmount
      :tableData="tableData"
      :fastAmountList="fastAmountList"
      :limitType="limitType"
    />
    <div style="padding: 10px 0;">
      <RechargeLimitSettFormFilter
        :limitType="limitType"
        @on-filter="submitFilterForm"
      />
    </div>
    <el-table
      border
      :data="tableData.data"
      v-loading="loading"
      element-loading-text="加载中..."
      class="el-table-align-center"
      :span-method="handleSpanMethod"
    >
      <el-table-column label="商户名" prop="channelName" align="center">
      </el-table-column>
      <el-table-column
        label="商户号"
        prop="merchantCode"
        align="center"
      >
        <template slot-scope="{row}">
          <el-tooltip
            placement="top"
            v-if="row.merchantCode && row.merchantCode.length > constType.ellipsisLen + 5"
          >
            <div slot="content" class="global-table-tooltip-item-view">
              {{row.merchantCode}}
            </div>
            <div class="global-table-single-item-view">{{row.merchantCode}}</div>
          </el-tooltip>
          <div class="global-table-single-item-view" v-else>{{row.merchantCode}}</div>
        </template>
      </el-table-column>
      <el-table-column label="充值名称显示" prop="paymentName" align="center">
      </el-table-column>
      <el-table-column label="充值手续费" prop="feeRate" align="center">
        <template slot-scope="{row}">
          <span v-if="row.feeRate >= 0">{{row.feeRate | currency}} %</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="手续费最高金额" prop="maxFee" align="center">
        <template slot-scope="{row}">
          <span v-if="row.maxFee >= 0">{{row.maxFee | currency}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="最低金额" prop="minAmount" align="center">
        <template slot-scope="{row}">
          <span v-if="row.minAmount >= 0">{{row.minAmount | currency}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="最高金额" prop="maxAmount" align="center">
        <template slot-scope="{row}">
          <span v-if="row.maxAmount >= 0">{{row.maxAmount | currency}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <!--<el-table-column
        label="快捷金额"
        prop="fastAmountList"
        align="center"
        v-if="showFastAmountList"
      >
        <template slot-scope="{row}">
          {{row.fastAmountList | join }}
        </template>
      </el-table-column>-->
      <el-table-column label="操作" width="180px" align="center" fixed="right">
        <template slot-scope="{row}">
          <el-button
            v-if="roleCheck(finaRechargeType.rechargeAmountConfig)"
            type="text"
            @click="openDialog({dialogName: dialogType.rechLimitSettEdit, props: row })"
          >
            编辑
          </el-button>
          <el-button
            v-if="roleCheck(finaRechargeType.rechargeLimitBank) && row.paymentName === '网银支付'"
            type="text"
            @click="openDialog({dialogName: dialogType.rechLimitBank, props: row })"
          >
            设置银行卡限额
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-tip class="tip">注：配置商户号时必须配置“最低金额”“最高金额”否则，在前台用户也无法看见此商户号应用的支付方式。</el-tip>
    <RechargeLimitSettingEditDialog
      v-if="dialogName === dialogType.rechLimitSettEdit"
      v-model="dialogVisible"
      :rowData="dialogProps"
      :limitType="limitType"
      @submit="submitFinished"
    />
    <RechargeLimitBankDialog
      v-if="dialogName === dialogType.rechLimitBank"
      v-model="dialogVisible"
      :rowData="dialogProps"
      @submit="submitFinished"
    />
  </div>
</template>

<script>

// constants
import { finaRechargeType } from '@/router/financeRoutes';
import { constType } from '@/const/payEnum';

// components
import RechargeLimitSettingFastAmount from './rechargeLimitSettingFastAmount';
import RechargeLimitSettFormFilter from './rechargeLimitSettFormFilter';
import RechargeLimitSettingEditDialog from './rechargeLimitSettingEditDialog';
import RechargeLimitBankDialog from './rechargeLimitBankDialog';

// services
import {
  getRechargeLimitSettings,
} from '@/services/api/recharge';

// mixins
import {
  grid, form, dialog, constsLabel,
} from '@/build';

const dialogType = {
  rechLimitSettEdit: 'recharge-limit-setting-dialog',
  rechLimitBank: 'recharge-limit-bank-dialog',
};

export default {
  name: 'recharge-limit-setting',
  components: {
    RechargeLimitSettingFastAmount,
    RechargeLimitSettFormFilter,
    RechargeLimitSettingEditDialog,
    RechargeLimitBankDialog,
  },
  props: {
    limitType: {
      type: Number,
      default: 0,
    },
  },
  mixins: [grid, form, dialog, constsLabel],
  data() {
    return {
      finaRechargeType,
      constType,
      dialogType,
      tableData: {
        data: [],
        fastAmount: [],
      },
      fastAmountList: ['', '', '', '', '', '', '', ''],
      isEditable: false,
      filters: {
        clientType: 0,
        limitType: this.limitType,
        userType: 0,
      },
      rules: {
        amount: [
          { required: true, message: '金额不能为空' },
        ],
      },
    };
  },
  computed: {
    listLen() {
      return (this.tableData.data && this.tableData.data.length) || 0;
    },
    // showFastAmountList() {
    //   return !([1, 2, 3].includes(this.filters.clientType));
    // },
  },
  methods: {
    handleSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        if (rowIndex === 0) {
          return {
            rowspan: this.listLen,
            colspan: 1,
          };
        }
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    },
  },
  mounted() {
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '充值金额设置', true) });
    this.bindGet(getRechargeLimitSettings, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      format: (data) => {
        const fastList = data.fastAmount || [];
        if (fastList.length) {
          this.fastAmountList = fastList;
        }
        return {
          ...data,
          fastAmount: [fastList],
        };
      },
    });

    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  .mobile-quick-amount-config {
    margin-bottom: 20px;
  }
  .tip{
    margin-top: 10px;
  }
</style>
